<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/staticfile/css/bootstrap.css" />
		<title>猪农银行登录页面</title>
		<link rel="shortcut icon" href="${pageContext.request.contextPath }/staticfile/img/denglu.png">
		<style type="text/css">

			.form {
				width: 500px;
				padding: 20px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background: rgba(255, 175, 97, 0);
				border-radius: 10px;
				box-shadow: 5px 5px 20px #444444;

			}

			.input-group {
				font-size: 18px;
				border-radius: 6px;
				padding-top: 10px;
			}
			canvas#live2dcanvas {
			border: 0 !important;
			left: 0;
			}
			#canvas {
				float: right;
				display: inline-block;
				border: 1px solid #ccc;
				border-radius: 5px;
				cursor: pointer;

			}

            body {
                height:auto;
                background:url("${pageContext.request.contextPath }/uploadImage/as.jpeg") no-repeat center fixed;
                -webkit-background-size:cover;
                -moz-background-size:cover;
                -o-background-size:cover;
                background-size:cover;
            }

			source{
				min-width: 100%;
				min-height: 100%;
				height: auto;
				width: auto;
			}
		</style>
	</head>
	<body>

		<div class="form" id="form">

				<h3 class="text-center " style="color: #1abc9c">猪农银行系统登录</h3>
				<h3 class="text-center" style="color: deeppink" id="msg">${msg }</h3>
				<h2 class="text-center" style="color: deeppink">${loginis} </h2>
					<div class="input-group">
					<input type="text" class="form-control input-lg" id="account_name" name="account_name" placeholder="登陆账户" style="background: none">
					<div class="input-group-addon ">
						<span class="glyphicon glyphicon-user " aria-hidden="true"></span>
					</div>
				</div>
	
				<div class="input-group">
					<input type="password" class="form-control input-lg" name="password" id="password" placeholder="用户密码" style="background: none">
					<div class="input-group-addon "><span class="glyphicon glyphicon-glyphicon glyphicon-lock" aria-hidden="true"></span></div>
				</div>
	
				<div class="input-group">
					<input type="text" value="" placeholder="请输入验证码" class="form-control input-lg input-val" style="width: 100%;background: none" id="verification_code" />
					<div class="input-group-addon "><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></div>
					<canvas id="canvas" width="125" height="44"></canvas>
				</div>
				<h3><a style="color: deeppink" href="${pageContext.request.contextPath }/" rel="tooltip" data-placement="bottom" data-original-title="体验新版">体验新版</a></h3>

				<div class="input-group ">
					<button type="submit" class="btn btn-block btn-info btn-lg " id="btn_login" style="width: 636%; ">登录</button>
				</div>
			
		
		</div>
	</body>

	<script src="${pageContext.request.contextPath }/staticfile/js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath }/staticfile/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		$(function() {
			/*-------------------验证码-------------*/
			var show_num = [];
			draw(show_num);

			$("#canvas").on('click',function(){
				draw(show_num);
			})

			function draw(show_num) {
				var canvas_width=$('#canvas').width();
				var canvas_height=$('#canvas').height();
				var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
				var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
				canvas.width = canvas_width;
				canvas.height = canvas_height;
				var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
				var aCode = sCode.split(",");
				var aLength = aCode.length;//获取到数组的长度

				for (var i = 0; i <= 3; i++) {
					var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
					var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
					var txt = aCode[j];//得到随机的一个内容
					show_num[i] = txt.toLowerCase();
					var x = 10 + i * 20;//文字在canvas上的x坐标
					var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
					context.font = "bold 23px 微软雅黑";

					context.translate(x, y);
					context.rotate(deg);

					context.fillStyle = randomColor();
					context.fillText(txt, 0, 0);

					context.rotate(-deg);
					context.translate(-x, -y);
				}
				for (var i = 0; i <= 5; i++) { //验证码上显示线条
					context.strokeStyle = randomColor();
					context.beginPath();
					context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.stroke();
				}
				for (var i = 0; i <= 30; i++) { //验证码上显示小点
					context.strokeStyle = randomColor();
					context.beginPath();
					var x = Math.random() * canvas_width;
					var y = Math.random() * canvas_height;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.stroke();
				}
			}

			function randomColor() {//得到随机的颜色值
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			}
			/*---------------------------验证码end----------------------*/

			/* ****************************异步登录**************************** */
			var $btn_login = $("#btn_login");

			$btn_login.click(function() {
				var val = $(".input-val").val().toLowerCase();
				var num = show_num.join("");
				if(val==''){
					$("#msg").html("请输入验证码！").show(3000).delay(1000).hide(3000);
				}else if(val == num){
					$("#msg").html("验证成功！").show(3000).delay(1000).hide(3000);
					draw(show_num);
					if ($("#verification_code").val() != "" && $("#account_name").val() != "" && $("#password").val() != "") {
						$.ajax({
							//${pageContext.request.contextPath}
							url: "${pageContext.request.contextPath}/user/index",
							data: {
								account_name: $("#account_name").val(),
								password: $("#password").val(),
							},
							type: 'post', //HTTP请求类型
							success: function(data) {
								console.log("-----" + data);
								//alert(data)
								if (data=="200") {
									console.log("登录成功")
									$("#msg").html("登录成功").show(3000).delay(1000).hide(3000);
									window.location.href = "${pageContext.request.contextPath }/user/home";
								}
								else {
									console.log(data);

									$("#msg").html("登录失败...密码或者账户错误").show(3000).delay(1000).hide(3000);
								}
							},
							error: function() {
								$("#msg").html("登陆异常").show(3000).delay(1000).hide(3000);
							},
							beforeSend:function () {
								$("#msg").html("<img src='${pageContext.request.contextPath }/staticfile/img/upload.gif'>")
							}

						});
					} else if ($("#verification_code").val() != "" && $("#account_name").val() == "" && $("#password").val() != "") {
						$("#msg").html("请输入账户名").show(3000).delay(1000).hide(3000);
					} else if ($("#verification_code").val() != "" && $("#account_name").val() != "" && $("#password").val()== "") {
						$("#msg").html("请输入密码").show(3000).delay(1000).hide(3000);
					} else if ($("#verification_code").val() == "" && $("#account_name").val() != "" && $("#password").val() != "") {
						$("#msg").html("请验证码").show(3000).delay(1000).hide(3000);
					} else {
						$("#msg").html("请输入账户").show(3000).delay(1000).hide(3000);
					}
				}else{
					$("#msg").html("验证码错误！").show(3000).delay(1000).hide(3000);
					$(".input-val").val('');
					draw(show_num);
				}

			})
		
			/* ****************************异步登录--end**************************** */

		})
	</script>
	<script>
		$(function (){
			$("#example").popover();
		});
	</script>
	<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
		<script src="${pageContext.request.contextPath }/staticfile/js/younger.js"></script>
		<script type="text/javascript">
		L2Dwidget.init();
		</script>
</html>